<template>
  <div id="business">
		<div class="filterForm">
			<div class="filterContBox">
				<!-- <div class="filterLabel">搜索类型</div> -->
					<el-input placeholder="请输入内容" v-model="keyWord">
							<el-select v-model="keyWordType" slot="prepend" placeholder="请选择">
								<el-option label="合作公司ID" value="id"></el-option>
								<el-option label="合作公司名称" value="name"></el-option>   
							</el-select>
						</el-input>
			</div>
		</div>
		<div class="filterButton">
			<el-button type="warning" class="btn" @click="query">查询</el-button>
			<el-button type="warning" class="btn" @click="create" v-if="getButtonConfig&&getButtonConfig.create">
					添加
			</el-button>
		</div>
		<create-dialog v-if="show" @close="closeDialog"></create-dialog>
	</div>
</template>
<script>
import createDialog from '../components/dialog'
export default {
  components: {
    createDialog
  },
  data () {
    return {
      keyWord: '',
      keyWordType: 'id',
      show: false
    }
  },
  watch: {
    keyWord (val, oldVal) {
      this.$emit('changeKeyWord', this.keyWordType, val)
    },
    keyWordType (val, oldVal) {
      this.$emit('changeKeyWord', oldVal, '')
      this.keyWord = '';
    }
  },
  computed: {
    getButtonConfig () {
      return this.$store.getters.getButtonConfig('businessManagement')
    }
  },
  methods: {
    query () {
      this.$emit('query');
    },
    create () {
      this.show = true;
    },
    closeDialog () {
      this.show = false;
      this.$emit('query');
    }
  }
}
</script>
<style lang="less">
  .filterButton{
    float: right;
	}
	#business{
		@import '~style/filter.less';
		.filterContBox{
			.el-select .el-input{
				width: 130px;
				.el-input__inner{
					&:focus{
					border-color:white;
					}
				}
			}
			.el-input__inner{
				width:180px;
			}
		} 
		
  }
</style>
